<template>
            <!-- 歌曲列表 -->
       <div class="itemList">
        <div class="item" v-for="(item,i) in searchList" :key="i">
            <div class="itemLeft"  @click="updateIndex(item)">
                <span class="leftSpan">{{i+1}}</span>
                <!-- 歌曲作者名字 -->
                <div>
                    <p>{{item.name}}</p>
                    <span v-for="(item1, index) in item.artists" :key ="index">
                        {{item1.name}}
                    </span>
                </div>
            </div>
            <!-- 歌曲MV -->
            <div class="itemRight">
                <div >
                  <!-- 判断 MV 是否等于 0 如果等于 0 则没有 MV视频  -->
                  <van-icon name="tv-o" class="itemRight-play" v-if="item.mvid !=0"/>
                  <van-icon name="wap-nav"  class="itemRight-info"/>
                </div>
            </div>
            </div>
       </div>
</template>

<script>
export default {
    props:[
        'searchList'
    ],
    //方法
    methods:{
        //点击搜索的歌曲添加到列表，然后播放
        updateIndex(item){
            //地址不一样赋值地址
            item.al = item.album;
            item.al.picUrl = item.album.artist.img1v1Url;

            this.$store.commit('pushPlsyList',item)
            this.$store.commit('updatePlayListIndex',
                this.$store.state.plaList.length - 1)
        }
    }
}
</script>
<style lang="less" scoped>
    .itemList{

        width: 100%;
        padding: .4rem;
        padding-bottom:2rem ;
        .item{
            width: 100%;
            height: 1.4rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .itemLeft{
                width: 85%;
                height: 100%;
                display: flex;
                align-items: center;
                .leftSpan{
                    display: inline-block;
                    width: 0.2rem;
                    text-align: center;
                }
                div{
                    margin-left: 0.3rem;
                    p{
                        width: 4.54rem;
                        height: .4rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-weight: 700;
                    }
                    span{
                        font-weight: 400;
                        font-size: .24rem;
                        color: #999;
                    }

                }
            }
            .itemRight{
                width: 20%;
                height: 100%;
                display: flex;
                align-items: center;
                position: relative;
                color: #999;
                font-size:.5rem;
                .itemRight-play{
                    position: absolute;
                    left: 0;
                }
                .itemRight-info{
                    position: absolute;
                    right: 0;
                }
            }
        }
    }
</style>